<template>
    <div>
        <div class="select_sys">
        <h2>{{city[0].pname}}</h2>
        <div class="sys_content">
            <div class="sys_btn clearfix">
            <div>
                <router-link to="/login">
                <span>小学入学服务系统</span>
                </router-link>
            </div>
            <div>
                <router-link to="/login">
                <span>按本市户籍对待适龄儿童</span>
                <em>接受义务教育材料审核入口</em>
                </router-link>
            </div>
            <div>
                <router-link to="/login">
                <span>非本市户籍适龄儿童</span>
                <em>接受义务教育材料审核入口</em>
                </router-link>
            </div>
            </div>
        </div>
        </div>
        <div class="tel">
        <p>
            <van-icon name="phone" size="10vw" />
        </p>
        <div>
            <span>小学入学咨询电话</span>
            <p>64222788 / 64226678 / 64213056</p>
        </div>
        </div>
        <div class="zc">
        <div>
            <span>
            政策信息
            </span>
            <ul>
            <li>
                <router-link to="/policy">{{city[0].pname}}2021年非本区户籍适龄儿童入学审核实施规则</router-link>
            </li>
            </ul>
        </div>
        <div>
            <span>小学介绍</span>
            <router-link class="gd" :to="`/schoolmore?pid=${pid}`">
            更多
            <van-icon name="arrow" />
            </router-link>
            <ul>
            <li>
                <router-link :to="`/school?id=${city[0].sid}`">{{city[0].sname}}</router-link>
            </li>
            <li>
                <router-link :to="`/school?id=${city[1].sid}`">{{city[1].sname}}</router-link>
            </li>
            <li>
                <router-link :to="`/school?id=${city[2].sid}`">{{city[2].sname}}</router-link>
            </li>
            </ul>
        </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            city:[] ,
            pid:0,
        };
    },
    mounted() {
        var id = this.$route.query.id;
        console.log(id);
        this.pid=id;

            this.axios.get(`/city?pid=${id}`).then((result)=>{
            // console.log(result)
            this.city = result.data.results
            console.log(this.city[0]);
            });
    }
};
</script>

<style scoped>
.zc div ul {
    padding: 2vw;
}
.zc div .gd {
    float: right;
}
.zc div span,
a {
    font-size: 4vw;
    font-weight: bold;
}
.zc div a {
    color: black;
    display: flex;
    align-items: center;
    padding-bottom: 4vw;
}
.zc div {
    margin: 4vw 2vw;
}

.tel div p {
    font-size: 6vw;
    font-weight: bold;
}

.tel div {
    font-size: 4vw;
    padding-bottom: 2vw;
    color: #666;
}
.tel {
    margin: 6vw 2vw;
    background: #fafafa;
    padding: 6vw 6vw;
    border-radius: 3vw;
}

.sys_btn div a em {
    font-size: 3vw;
    font-style: normal;
}
.sys_btn div a span {
    display: block;
    font-size: 4vw;
    font-weight: bold;
    padding-bottom: 1vw;
}
.sys_btn div a {
    background-color: rgb(191, 53, 61, 0.2);
    border-radius: 3vw;
    height: 18vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #bc272e;
}
.sys_btn div {
  /* width: 100%; */
    padding: 3vw;
}

.select_sys {
    background: #fcf4f4 url("../assets/banner_qx.png") no-repeat center bottom;
    padding: 10vw 0;
    text-align: center;
}

.select_sys {
    background-position: -112vw bottom;
}
</style>